import type { SetupContext } from 'vue'
import type { MenuIconModalPropsType } from './typings'
import { ElDialog, ElSpace, ElLink, ElTooltip } from 'element-plus'
import AliIcon from '~/components/AliIocn'
import styles from '../../index.module.scss'

export default function MenuIconModal(props: MenuIconModalPropsType, context: SetupContext) {
  const { visible, cancel } = props
  const iconList: string[] = [
    'icon-zhaobiaoguanli1',
    'icon-guihuasheji',
    'icon-zichan',
    'icon-diyufenbu',
    'icon-a-jizhanxinhaoxinhaotafashexinhao',
    'icon-jiaoseguanli',
    'icon-yonghuguanli',
    'icon-gangweiguanli',
    'icon-bumenguanli',
    'icon-huilujiankongxiang',
    'icon-shebeiguanli',
    'icon-xitongguanli',
    'icon-jiankongguanli',
    'icon-shujubaobiao',
    'icon-jingbaoguanli',
    'icon-ditu',
    'icon-wodedaiban',
    'icon-gongdanguanli',
    'icon-xunshiguanli',
    'icon-xunshiditu',
    'icon-xunshijihua',
    'icon-xunshirenwu',
    'icon-xunshijilu',
    'icon-qiehuanrelitu',
    'icon-qiehuanliebiao',
    'icon-chulishuliang',
    'icon-pingjunchushichang',
    'icon-bianji',
    'icon-qiehuandituzhanshi',
    'icon-qingkong',
    'icon-fanhuishangyiji',
    'icon-chakan',
    'icon-gongdanchuli',
    'icon-chaoshigongdan',
    'icon-daping',
    'icon-gongdanyueshi',
    'icon-gongdantuihui',
    'icon-shezhi1',
    'icon-guidanggongdan',
    'icon-xinzenggongdan-xianxing',
    'icon-yiwanchenggongdan',
    'icon-tongjifenxi1',
    'icon-zhinengzhaoming1',
    'icon-xinzengxunshijihua',
    'icon-xinzenggongzuopiaoshenqing',
    'icon-xunshigongdan',
    'icon-xunshichaoshi',
    'icon-xinzenggongdan-mianxing',
    'icon-zichanshouye',
    'icon-zichanguanli',
    'icon-zhuantitu',
    'icon-tupianshangchuan',
    'icon-zhongzhi',
    'icon-xiala',
    'icon-xinzeng',
    'icon-xinzeng-2',
    'icon-yunweiguanli',
    'icon-tuodongtiaozhengshunxu',
    'icon-zhinengzhaoming',
    'icon-zhinengdenggan',
    'icon-tupianshanchu',
    'icon-tupianfangda',
    'icon-tongjifenxi',
    'icon-tixing',
    'icon-shurukuangxiala',
    'icon-shouye',
    'icon-sousuo',
    'icon-shuaxin',
    'icon-shaixuanlieweixuanzhong',
    'icon-shaixuanliexuanzhong',
    'icon-shouqi',
    'icon-rili',
    'icon-shanchu',
    'icon-quyuguanli-tubiao9',
    'icon-quyuguanli-tubiao10',
    'icon-shezhi',
    'icon-sheshiguanli',
    'icon-quyuguanli-tubiao8',
    'icon-quyuguanli-quanfu',
    'icon-quyuguanli-tubiao4',
    'icon-guanbi',
    'icon-quyuguanli-tubiao3',
    'icon-quyuguanli-tubiao5',
    'icon-quyuguanli-tubiao2',
    'icon-quyuguanli-tubiao7',
    'icon-quyuguanli-tubiao6',
    'icon-duoxuan-xuanzhong',
    'icon-danchuang-guanbi',
    'icon-dingwei',
    'icon-daochu',
    'icon-duoxuan-weixuanzhong',
    'icon-ditudingwei2',
    'icon-gudinglieweixuanzhong',
    'icon-ditudingwei',
    'icon-gudingliexuanzhong'
  ]

  return (
    <ElDialog
      title="请选择菜单图标"
      modelValue={visible}
      closeOnClickModal={false} // 点遮罩层不关弹窗
      draggable // 可拖拽
      beforeClose={cancel}
    >
      <ElSpace wrap>
        {iconList?.map((item) => (
          <ElLink
            class={styles['choose-icon']}
            underline={false}
            icon={
              <ElTooltip content={item}>
                <AliIcon type={item} />
              </ElTooltip>
            }
            onClick={() => {
              context.emit('changIcon', item)
              cancel()
            }}
          />
        ))}
      </ElSpace>
    </ElDialog>
  )
}
